<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    //目标主题类
    class Subject{
        constructor(options){
            this.$data = options.data //接收数据
            this.$watcher = [] //存放观察者的容器
            this.dep(this.$data) //执行该函数
        }

        dep(data){
            //准备好容器 放data里面属性对应的观察者
            for(let key in data){
                this.$watcher[key] = [] //生成的内容格式是[myText:[],myBox:[]]
            }
            this.addWatcher("myText",new Watcher("p标签")) //执行addWatcher方法
            this.addWatcher("myText",new Watcher("a标签"))
            this.addWatcher("myBox",new Watcher("div标签"))
            this.addWatcher("myBox",new Watcher("span标签"))
        }

        addWatcher(type,watcher){ //添加观察者
            this.$watcher[type].push(watcher) //把生成的观察者实例对象添加到存放观察者的容器中
        }

        notify(key){
            this.$watcher[key].forEach(item =>{ //item就是观察者的容器中每个观察者实例对象
                item.update() //观察者实例对象调用更新方法
            })
        }
    }

    //观察者类
    class Watcher{
        constructor(args){
            this.args = args
        }

        update(){ //更新方法
            console.log(this.args + "开始更新页面数据")
        }
    }

    let subject = new Subject({
        data:{myText:"我是一个孩子",myBox:"我是一个汉子"}
    })

    subject.notify("myText") //调用通知方法
    subject.notify("myBox")
</script>
</body>
</html>